<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #map {
            position: relative;
            width: 400px;
            height: 400px;
            background: #000;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
class Map {
   constructor(el,rect = 10){
        this.el = el;
        this.rect = rect;
        this.data = [
            // {
            //     x: 10,
            //     y: 5,
            //     color: "red"
            // }
        ];
        this.rows = Math.ceil(Map.getStyle(el,"height") / rect);
        this.cells = Math.ceil(Map.getStyle(el,"width") / rect);
        Map.setStyle(el,"height",this.rows*rect);
        Map.setStyle(el,"width",this.cells*rect);
   } 
   static getStyle(el,attr){
        return parseFloat(getComputedStyle(el)[attr])
   }
   static setStyle(el,attr,val){
       el.style[attr] = val + "px";
   }
   setData(newData){
        this.data = this.data.concat(newData);
   }
   clearData(){
    this.data.length = 0;
   }
   include({x,y}){
        return !!this.data.find(item=>(item.x==x&&item.y==y));
   }
   render(){
        this.el.innerHTML =  this.data.map(item=>{
            return `<span style="position:absolute;left:${item.x*this.rect}px;top:${item.y*this.rect}px;width:${this.rect}px;height:${this.rect}px;background:${item.color};"></span>`
        }).join("");
   }
}
class Food {
    constructor(map,colors = ['red',"blue","yellow","pink"]){
        this.map = map;
        this.colors = colors;
        this.data = null;
    }
    create(){
        let x = Math.floor(Math.random()*this.map.cells);
        let y = Math.floor(Math.random()*this.map.rows);
        let color = this.colors[parseInt(Math.random()*this.colors.length)];
        this.data = {x,y,color};
        if(this.map.include(this.data)){
            this.create();
        }
    }
}
{
    let map = document.querySelector("#map");
    let gameMap = new Map(map,10);
    let gameFood = new Food(gameMap);
    // setInterval(()=>{
    //     gameFood.create();
    //     gameMap.setData(gameFood.data);
    //     gameMap.render();
    // },200);
}
</script>
</body>
</html>